<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>在线课程学习网站</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="all,follow" />
    <link rel="stylesheet" href="vendor/swiper/swiper-bundle.min.css" />
    <link
      rel="stylesheet"
      href="vendor/owl.carousel2/assets/owl.carousel.min.css"
    />
    <link
      rel="stylesheet"
      href="vendor/owl.carousel2/assets/owl.theme.default.min.css"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Nunito:300,400&amp;display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Abril+Fatface&amp;display=swap"
    />
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet" />
    <link rel="stylesheet" href="css/custom.css" />
  </head>

  <body>
    <header class="header">
      <nav
        class="navbar navbar-expand-lg navbar-light border-gray py-2 bg-light"
      >
        <div class="container">
          <button
            class="navbar-toggler navbar-toggler-right mx-auto border-0"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            class="collapse navbar-collapse text-center"
            id="navbarSupportedContent"
          >
            <ul class="navbar-nav mx-auto" style="font-size: 20px">
              <li class="nav-item px-1">
                <a class="nav-link" href="./index.html">HTML</a>
              </li>
              <li class="nav-item px-1">
                <a class="nav-link active" href="./css.html">CSS</a>
              </li>
              <li class="nav-item px-1">
                <a class="nav-link" href="./js.html">JS</a>
              </li>
              <li class="nav-item px-1">
                <a class="nav-link" href="./login.html">login</a>
              </li>
              <li class="nav-item px-1">
                <a class="nav-link" href="https://gitee.com/lover_3/final.git"
                  >Gitee</a
                >
              </li>
              <li class="nav-item px-1">
                <a
                  class="nav-link"
                  href="https://www.bilibili.com/video/BV1CR3seaEzG/"
                  >Video</a
                >
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <section
      class="hero bg-center bg-cover"
      style="
        background: url(https://coursework.vschool.io/content/images/size/w2000/2015/06/css3.jpg);
      "
    >
      <div class="dark-overlay py-5">
        <div class="overlay-content">
          <div class="container py-5 text-white text-center">
            <h1>CSS 介绍</h1>
            <p>
              CSS代表级联样式表（ Cascading Style
              Sheets）。CSS是一种标准样式表语言，用于描述网页的表示形式（即布局和格式）。
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="pt-5">
      <div class="container pt-5">
        <div class="row mb-5">
          <div class="col-lg-12">
            <div class="row text-center">
              <div class="col-lg-6 mb-5">
                <a
                  href="https://www.bilibili.com/video/BV1QM411c7ts/?spm_id_from=333.337.search-card.all.click"
                >
                  <img
                    class="img-fluid mb-4"
                    src="https://www.oscardehoyos.com/wp-content/uploads/2020/11/css-hojas-de-estilo-1.jpg"
                    alt=""
                  />
                </a>
                <ul class="list-inline small text-uppercase mb-0">
                  <li class="list-inline-item me-0 text-gray align-middle">
                    By
                  </li>
                  <li class="list-inline-item align-middle me-0">
                    <a class="fw-bold reset-anchor" href="#!"> 刁老师</a>
                  </li>
                  <li class="list-inline-item text-gray align-middle me-0">
                    |
                  </li>
                  <li class="list-inline-item text-gray align-middle">
                    22 June 2024
                  </li>
                </ul>
                <h3 class="h4 mt-2">
                  <a
                    class="reset-anchor"
                    href="https://www.bilibili.com/video/BV1QM411c7ts/?spm_id_from=333.337.search-card.all.click"
                    >CSS可以做什么</a
                  >
                </h3>
                <p class="text-small mb-1">
                  您可以轻松地将相同的样式规则应用于多个元素。
                  您可以使用一个样式表来控制网站多个页面的显示。
                  您可以在不同设备上以不同方式显示同一页面。
                </p>
                <a
                  class="btn btn-link"
                  href="https://www.bilibili.com/video/BV1QM411c7ts/?spm_id_from=333.337.search-card.all.click"
                  >查看更多</a
                >
              </div>
              <div class="col-lg-6 mb-5">
                <a href="https://www.bilibili.com/video/BV15P4y1C7dL/?spm_id_from=333.337.search-card.all.click">
                  <img
                    class="img-fluid mb-4"
                    src="https://www.oscardehoyos.com/wp-content/uploads/2020/11/css-hojas-de-estilo-1.jpg"
                    alt=""
                  />
                </a>
                <ul class="list-inline small text-uppercase mb-0">
                  <li class="list-inline-item me-0 text-gray align-middle">
                    By
                  </li>
                  <li class="list-inline-item align-middle me-0">
                    <a class="fw-bold reset-anchor" href="#!">刁老师</a>
                  </li>
                  <li class="list-inline-item text-gray align-middle me-0">
                    |
                  </li>
                  <li class="list-inline-item text-gray align-middle">
                    22 June 2024
                  </li>
                </ul>
                <h3 class="h4 mt-2">
                  <a
                    class="reset-anchor"
                    href="https://www.bilibili.com/video/BV15P4y1C7dL/?spm_id_from=333.337.search-card.all.click"
                    >使用CSS的优点</a
                  >
                </h3>
                <p class="text-small mb-1">
                  CSS节省大量时间
                  -CSS提供了很多灵活性来设置元素的样式属性。您可以编写一次CSS。
                  然后相同的代码可以应用于HTML元素组，也可以在多个HTML页面中重复使用。
                </p>
                <a
                  class="btn btn-link"
                  href="https://www.bilibili.com/video/BV15P4y1C7dL/?spm_id_from=333.337.search-card.all.click"
                  >查看更多</a
                >
              </div>
              <div class="col-lg-6 mb-5">
                <a
                  href="https://www.bilibili.com/video/BV15P4y1C7dL/?spm_id_from=333.337.search-card.all.click"
                >
                  <img
                    class="img-fluid mb-4"
                    src="https://www.oscardehoyos.com/wp-content/uploads/2020/11/css-hojas-de-estilo-1.jpg"
                    alt=""
                  />
                </a>
                <ul class="list-inline small text-uppercase mb-0">
                  <li class="list-inline-item me-0 text-gray align-middle">
                    By
                  </li>
                  <li class="list-inline-item align-middle me-0">
                    <a class="fw-bold reset-anchor" href="#!">刁老师</a>
                  </li>
                  <li class="list-inline-item text-gray align-middle me-0">
                    |
                  </li>
                  <li class="list-inline-item text-gray align-middle">
                    22 June 2024
                  </li>
                </ul>
                <h3 class="h4 mt-2">
                  <a
                    class="reset-anchor"
                    href="https://www.bilibili.com/video/BV14J4114768/?spm_id_from=333.337.search-card.all.click"
                    >CSS入门</a
                  >
                </h3>
                <p class="text-small mb-1">
                  在本教程中，您将学习使用CSS向网页添加样式和格式设置信息有多么容易。
                  但是，在开始之前，请确保您具有HTML的一些使用知识。
                </p>
                <a
                  class="btn btn-link"
                  href="https://www.bilibili.com/video/BV14J4114768/?spm_id_from=333.337.search-card.all.click"
                  >查看更多</a
                >
              </div>
              <div class="col-lg-6 mb-5">
                <a
                  href="https://www.bilibili.com/video/BV1hN4y1N7jK/?spm_id_from=333.337.search-card.all.click"
                >
                  <img
                    class="img-fluid mb-4"
                    src="https://www.oscardehoyos.com/wp-content/uploads/2020/11/css-hojas-de-estilo-1.jpg"
                    alt=""
                /></a>
                <ul class="list-inline small text-uppercase mb-0">
                  <li class="list-inline-item me-0 text-gray align-middle">
                    By
                  </li>
                  <li class="list-inline-item align-middle me-0">
                    <a class="fw-bold reset-anchor" href="#!">刁老师</a>
                  </li>
                  <li class="list-inline-item text-gray align-middle me-0">
                    |
                  </li>
                  <li class="list-inline-item text-gray align-middle">
                    22 June 2024
                  </li>
                </ul>
                <h3 class="h4 mt-2">
                  <a
                    class="reset-anchor"
                    href="https://www.bilibili.com/video/BV1hN4y1N7jK/?spm_id_from=333.337.search-card.all.click"
                    >内联样式</a
                  >
                </h3>
                <p class="text-small mb-1">
                  内联样式用于通过将CSS规则直接放入开始标记中来将唯一样式规则应用于元素。可以使用style属性将其附加到元素。
                </p>
                <a
                  class="btn btn-link"
                  href="https://www.bilibili.com/video/BV1hN4y1N7jK/?spm_id_from=333.337.search-card.all.click"
                  >查看更多</a
                >
              </div>
              <div class="col-lg-6 mb-5">
                <a
                  href="https://www.bilibili.com/video/BV1hN4y1N7jK/?spm_id_from=333.337.search-card.all.click"
                  ><img
                    class="img-fluid mb-4"
                    src="https://www.oscardehoyos.com/wp-content/uploads/2020/11/css-hojas-de-estilo-1.jpg"
                    alt=""
                /></a>
                <ul class="list-inline small text-uppercase mb-0">
                  <li class="list-inline-item me-0 text-gray align-middle">
                    By
                  </li>
                  <li class="list-inline-item align-middle me-0">
                    <a class="fw-bold reset-anchor" href="#!">刁老师</a>
                  </li>
                  <li class="list-inline-item text-gray align-middle me-0">
                    |
                  </li>
                  <li class="list-inline-item text-gray align-middle">
                    22 June 2024
                  </li>
                </ul>
                <h3 class="h4 mt-2">
                  <a
                    class="reset-anchor"
                    href="https://www.bilibili.com/video/BV1hN4y1N7jK/?spm_id_from=333.337.search-card.all.click"
                    >外部样式表</a
                  >
                </h3>
                <p class="text-small mb-1">
                  外部样式表是将CSS规则存储在独立的CSS文件中，并通过&lt;link&gt;标签链接到HTML文件。这种方法便于多个页面共享同一套样式规则，简化了维护工作。
                </p>
                <a
                  class="btn btn-link"
                  href="https://www.bilibili.com/video/BV1hN4y1N7jK/?spm_id_from=333.337.search-card.all.click"
                  >查看更多</a
                >
              </div>
              <div class="col-lg-6 mb-5">
                <a href="https://www.bilibili.com/video/BV1hN4y1N7jK/?spm_id_from=333.337.search-card.all.click"
                  ><img
                    class="img-fluid mb-4"
                    src="https://www.oscardehoyos.com/wp-content/uploads/2020/11/css-hojas-de-estilo-1.jpg"
                    alt=""
                /></a>
                <ul class="list-inline small text-uppercase mb-0">
                  <li class="list-inline-item me-0 text-gray align-middle">
                    By
                  </li>
                  <li class="list-inline-item align-middle me-0">
                    <a class="fw-bold reset-anchor" href="#!">刁老师</a>
                  </li>
                  <li class="list-inline-item text-gray align-middle me-0">
                    |
                  </li>
                  <li class="list-inline-item text-gray align-middle">
                    22 June 2024
                  </li>
                </ul>
                <h3 class="h4 mt-2">
                  <a
                    class="reset-anchor"
                    href="https://www.bilibili.com/video/BV1hN4y1N7jK/?spm_id_from=333.337.search-card.all.click"
                    >嵌入式样式</a
                  >
                </h3>
                <p class="text-small mb-1">
                  嵌入式样式是指将CSS规则放在HTML文件的&lt;style&gt;标签中，通常位于&lt;head&gt;部分。它适用于单个页面的样式定义，无需创建独立的CSS文件。
                </p>
                <a
                  class="btn btn-link"
                  href="https://www.bilibili.com/video/BV1hN4y1N7jK/?spm_id_from=333.337.search-card.all.click"
                  >查看更多</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 页脚 -->
    <footer class="bg-dark py-4">
      <div class="container">
        <div class="row py-2 gy-2">
          <div class="col-lg-4 text-center text-lg-start">
            <p class="small text-muted text-uppercase mb-0">
              &copy; 4090Ti bulc.revoledoc 版权所没有
            </p>
          </div>
          <div class="col-lg-4 text-center"></div>
          <div class="col-lg-4 text-center text-lg-end">
            <p class="small text-muted text-uppercase mb-0">
              <a target="_blank" href="https://gdga.gd.gov.cn/" title="联系我们"
                >联系我们</a
              >.
            </p>
          </div>
        </div>
      </div>
    </footer>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/swiper/swiper-bundle.min.js"></script>
    <script src="js/front.js"></script>
    <script>
      function injectSvgSprite(path) {
        var ajax = new XMLHttpRequest();
        ajax.open("GET", path, true);
        ajax.send();
        ajax.onload = function (e) {
          var div = document.createElement("div");
          div.className = "d-none";
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
        };
      }
      injectSvgSprite("icons/orion-svg-sprite.svg");
    </script>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </body>
</html>
